<template>
    <div class="home">
        <div class="wrapper">
            <StaticPartVue></StaticPartVue>
            <NearByVue :goodsData="goodsData" @go="handler"></NearByVue>
        </div>
        <DockerVue :navActive="navActive"></DockerVue>
    </div>
</template>

<script>
export default {
    name: 'home',
};
</script>

<script setup>
import StaticPartVue from './components/StaticPart.vue';
import NearByVue from './components/NearBy.vue';
import DockerVue from '@/components/Docker.vue';
import { requestGetNT } from '@/utils/Request';
import { reactive, ref } from 'vue';
import { Toast } from 'vant';
import router from '@/router';

const navActive = ref(0);
let goodsData = ref([]);
let params = reactive({
    project_id: 238,
    page: 1,
    limit: 6,
});

const getGoods = async () => {
    Toast.loading({
        message: '加载中...',
        forbidClick: true,
    });
    const res = await requestGetNT('/goods', params); //自己的项目：238
    goodsData.value = goodsData.value.concat(res.data.result.rows);
};

getGoods();
const handler = () => {
    if (params.page < 5) {
        params.page++;
        getGoods();
    }
};
</script>

<style lang="scss" scoped>
.wrapper {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0.5rem;
    background-color: #f1f1f1;
}
</style>
